<template>
    <div class="course-publish" style="width: 1360px;margin-top: 65px;margin-left: 165px;background-color: #a5c69523">
      <el-form :model="courseForm" :rules="rules" ref="courseFormRef" label-width="120px">
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="courseForm.name"></el-input>
        </el-form-item>
        <el-form-item label="课程描述" prop="description">
          <el-input type="textarea" v-model="courseForm.description"></el-input>
        </el-form-item>
        <el-form-item label="课程价格" prop="price">
          <el-input-number v-model="courseForm.price" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="课程详情" prop="details">
          <el-input type="textarea" v-model="courseForm.details" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="课程封面" prop="cover">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-success="handleCoverSuccess"
            :before-upload="beforeCoverUpload"
            :show-file-list="false"
          >
            <img v-if="courseForm.cover" :src="courseForm.cover" class="cover-image">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="附件上传" prop="attachments">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-success="handleAttachmentSuccess"
            :file-list="courseForm.attachments"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">发布课程</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  
  export default {
    setup() {
      const courseFormRef = ref(null);
      const courseForm = ref({
        name: '',
        description: '',
        price: 0,
        details: '',
        cover: '',
        attachments: []
      });
  
      const rules = ref({
        name: [
          { required: true, message: '请输入课程名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入课程描述', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入课程价格', trigger: 'blur' }
        ],
        details: [
          { required: true, message: '请输入课程详情', trigger: 'blur' }
        ]
      });
  
      const handleCoverSuccess = (file) => {
        courseForm.value.cover = URL.createObjectURL(file.raw);
      };
  
      const beforeCoverUpload = (file) => {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if (!isJPG) {
          ElMessage.error('上传封面图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          ElMessage.error('上传封面图片大小不能超过 2MB!');
        }
        return isJPG &&isLt2M;
      };
  
      const handleAttachmentSuccess = (response, file) => {
        courseForm.value.attachments.push(file);
      };
  
      const submitForm = () => {
        courseFormRef.value.validate((valid) => {
          if (valid) {
            // 提交表单数据到后端
            console.log(courseForm.value);
            ElMessage.success('课程发布成功');
          } else {
            ElMessage.error('表单验证失败');
            return false;
          }
        });
      };
  
      const resetForm = () => {
        courseFormRef.value.resetFields();
      };
  
      return {
        courseFormRef,
        courseForm,
        rules,
        handleCoverSuccess,
        beforeCoverUpload,
        handleAttachmentSuccess,
        submitForm,
        resetForm
      };
    }
  };
  </script>
  
  <style scoped>
  .cover-image {
    width: 100%;
    height: 178px;
    display: block;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
  }
  </style>
  